<template>
  <div class="movie-list-container">
    <div class="header">
      <h1 class="title">商品列表</h1>
      <div class="search-bar">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索商品..." 
          @keyup.enter="fetchMovies"
        />
        <button @click="fetchMovies">搜索</button>
      </div>
      <div class="filter">
        <select v-model="selectedCategory" @change="fetchMovies">
          <option value="">全部分类</option>
          <option v-for="category in categories" :key="category.id" :value="category.id">
            {{ category.name }}
          </option>
        </select>
      </div>
    </div>
    
    <div class="movie-grid">
      <MovieCard 
        v-for="movie in movies" 
        :key="movie.id" 
        :movie="movie" 
        @addToFavorites="addToFavorites"
      />
    </div>
    
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MovieCard from '@/components/common/MovieCard.vue';
import { useMovieStore } from '@/stores/movie';
import { useCategoryStore } from '@/stores/category';

export default {
  name: 'MovieListView',
  components: {
    MovieCard
  },
  setup() {
    const movieStore = useMovieStore();
    const categoryStore = useCategoryStore();
    
    const searchQuery = ref('');
    const selectedCategory = ref('');
    const currentPage = ref(1);
    const movies = ref([]);
    const categories = ref([]);
    const totalPages = ref(1);
    
    const fetchMovies = async () => {
      try {
        const params = {
          page: currentPage.value,
          search: searchQuery.value,
          category: selectedCategory.value
        };
        const result = await movieStore.fetchMovies(params);
        movies.value = result.items;
        totalPages.value = result.totalPages;
      } catch (error) {
        console.error('获取商品列表失败:', error);
        // 显示错误信息
      }
    };
    
    const fetchCategories = async () => {
      try {
        categories.value = await categoryStore.fetchCategories();
      } catch (error) {
        console.error('获取分类失败:', error);
        // 显示错误信息
      }
    };
    
    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
        fetchMovies();
      }
    };
    
    const nextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
        fetchMovies();
      }
    };
    
    const addToFavorites = (movieId) => {
      // 添加到收藏夹的逻辑
    };
    
    onMounted(async () => {
      await fetchCategories();
      await fetchMovies();
    });
    
    return {
      searchQuery,
      selectedCategory,
      currentPage,
      movies,
      categories,
      totalPages,
      fetchMovies,
      prevPage,
      nextPage,
      addToFavorites
    };
  }
};
</script>

<style scoped>
.movie-list-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.search-bar {
  display: flex;
  gap: 10px;
}

.search-bar input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-bar button {
  padding: 8px 15px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.filter select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.pagination button {
  padding: 8px 15px;
  background-color: #f0f2f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>    